<template>
  <main>
    <div class="log-div">
      <div class="div-reg">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              type="text"
              autocomplete="off"
              placeholder="请输入账号"
            />
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              v-model="ruleForm.pass"
              type="password"
              autocomplete="off"
              placeholder="请输入密码"
            />
          </el-form-item>
          <div class="btn-div">
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </main>
</template>

<script setup>
import VueCookies from "vue-cookies";
import axios from "axios";
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();

const ruleFormRef = ref("");
const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass3 = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  pass: "",
  username: "",
});

const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  username: [{ validator: validatePass3, trigger: "blur" }],
});

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log(ruleForm.username, ruleForm.pass);
      axios({
        method: "post",
        url: "/api/login",
        data: {
          username: ruleForm.username,
          password: ruleForm.pass,
        },
      }).then((res) => {
        if (res.data.meta.status == 200) {
          alert("登录成功，即将跳转首页");
          // 账号存入cookie
          VueCookies.set("token", res.data.data.token, 60 * 60 * 5);
          // 跳转首页
          router.push({
            name: "MyCeHome",
          });
        } else if (res.data.meta.status == 400) {
          alert(res.data.meta.msg);
        }
      });
    } else {
      return false;
    }
  });
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
main {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgb(40, 73, 109);
}
.log-div {
  width: 500px;
  height: 300px;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 250px);
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.div-reg >>> .btn-div {
  width: 300px !important;
}
.div-reg >>> .el-form-item__content {
  margin: 0 !important;
}

</style>